@extends("admin.common.admin")

<title>房源管理 - 添加房源 - H-ui.admin v3.1</title>
@section("cnt")
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i>
        首页
        <span class="c-gray en">&gt;</span>
        添加房源
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>


    <article class="page-container">
        @include("admin.common.msg")
        <form class="form form-horizontal" id="form-admin-add" method="post" action="{{ route("admin.fang.store") }}">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="中粮公寓" placeholder="" id="fang_name" name="fang_name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源小区名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="留仙二路欢乐捌社区" placeholder="" id="fang_xiaoqu" name="fang_xiaoqu">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">所在地区：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" onchange="chaneCity(this,'fang_city')" name="fang_province" size="1">
                        <option value="0" name="fang_province">==请选择省份==</option>
                        @foreach($cityData as $item)
                            <option value="{{ $item["id"] }}" name="fang_province">{{ $item["area"] }}</option>
                        @endforeach
                    </select>
			    </span>
                    <span class="select-box" style="width:150px;">
                    <select class="select" onchange="chaneCity(this,'fang_region')" id="fang_city" name="fang_city" size="1">
                            <option value="0" name="fang_city">==请选择市区==</option>
                    </select>
			    </span>
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_region" id="fang_region" size="1">
                            <option value="0" name="fang_region">==请选择区域==</option>
                    </select>
			    </span>
                    <span style="border: none;width: 600px;" class="select-box" style="width:150px;">
                        <input type="text" class="input-text" name="fang_addr" placeholder="详细地址" id="fang_addr" value="深圳市宝安区留仙二路">
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租金：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="1500" placeholder="" id="fang_rent" name="fang_rent">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>楼层：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="6" placeholder="" id="fang_floor" name="fang_floor">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">租期方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_rent_type" size="1">
                        @foreach($data["fang_rent_type"]["sub"] as $item)
                            <option value='{{ $item["id"] }}' name="role_id">{{ $item["name"] }}</option>
                            @endforeach
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几室：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="1" placeholder="" id="fang_shi" name="fang_shi">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几厅：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="1" placeholder="" id="fang_ting" name="fang_ting">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几卫：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="1" placeholder="" id="fang_wei" name="fang_wei">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">朝向：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_direction" size="1">
                        @foreach($data["fang_direction"]["sub"] as $item)
                            <option value='{{ $item["id"] }}' name="fang_direction">{{ $item["name"] }}</option>
                        @endforeach
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">租赁方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_rent_class" size="1">
                        @foreach($data["fang_rent_class"]["sub"] as $item)
                            <option value='{{ $item["id"] }}' name="fang_direction">{{ $item["name"] }}</option>
                        @endforeach
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">租房小组：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_group" size="1">
                        @foreach($data["fang_group"]["sub"] as $item)
                            <option value='{{ $item["id"] }}' name="fang_direction">{{ $item["name"] }}</option>
                        @endforeach
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="4500" placeholder="" id="fang_build_area" name="fang_build_area">
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="4400" placeholder="" id="fang_using_area" name="fang_using_area">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑年代：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" value="2018" placeholder="" id="fang_year" name="fang_year">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配套设施：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    @foreach($data["fang_config"]["sub"] as $item)
                        <label>
                            <input type="checkbox" name="fang_config[]" value='{{ $item["id"] }}'>{{ $item["name"] }}&nbsp;
                        </label>
                        @endforeach
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3">房东：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width:150px;">
                    <select class="select" name="fang_owner" size="1">
                        @foreach($ownerData as $item)
                            <option value="{{ $item->id }}" name="fang_direction">{{ $item->name }}</option>
                        @endforeach
                    </select>
			    </span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-3"><span class="c-red">*</span>房源图片：</label>
                <div class="formControls col-sm-9">
                    <div id="picker">房源图片</div>
                    <input type="hidden" value="" name="fang_pic" id="pic">
                    <div class="showpic"></div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="is_recommend" value="0" type="radio" checked>
                        <label for="sex-1">不推荐</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" value="1" name="is_recommend">
                        <label for="sex-2">推荐</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源描述：</label>
                <div class="formControls col-sm-10">
                    <textarea name="fang_desn" class="textarea">这是一个有欢笑的公寓，的回忆的公寓</textarea>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源详情：</label>
                <div class="formControls col-sm-10">
                    <textarea name="fang_body" id="fang_body">这是一个有欢笑的公寓，的回忆的公寓这是一个有欢笑的公寓，的回忆的公寓</textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交房源属性&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>
@endsection
@section("css")
    <link rel="stylesheet" href="/admin/lib/webuploader/0.1.5/webuploader.css" />
@endsection
@section("js")
    {{--富文本js引入--}}
    <script src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    {{--异步文件上传插件js--}}
    <script src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script type="text/javascript">
        const TOKEN = "{{ csrf_token() }}";
        // 初始化富文本
        const ue =UE.getEditor("fang_body");
        const uploader = WebUploader.create({
            // 选择完图片是否自动上传
            auto: true,
            // swf文件路径
            swf:"/admin/lib/webuploader/0.1.5/uploader.swf",
            // 上传文件处理的后台路由
            server:"{{ route(\"admin.fang.upfile\") }}",
            // 选择文件的按钮。可选。
            pick: {
                id:'#picker',
                multiple:true
            },
            fileNumLimit:10,
            // 额外参数
            formData:{
                _token:TOKEN,
                node:"fang"
            },
            // 表单域名称
            fileVal:"file",
            // 压缩
            resize:true,
            // 只能上传图片
            accept:{
                title:"Images",
                extensions:"gif,jpg,jpeg,bmp,png",
                mimeTypes:"image/*"
            }
        });

        let nenu = 0;
        $("#pid").change(function () {
            nenu = Number($(this).val());
            if( nenu > 0){
                $("#routename").slideDown();
            }else{
                $("#routename").slideUp();
            }
        })
        // 将返回的数据里面的图片进行页面的展示
        uploader.on("uploadSuccess",function (file, response) {
            let val = $("#pic").val();
            val += "#" + response.pic;
            $("#pic").val(val);
            let html = `<img src="${response.pic}" style="width: 100px;" />`;
            $(".showpic").append(html);
        })
        $(function(){
            $("#form-admin-add").validate({
                rules:{
                    fang_name:{
                        required:true,
                    },
                    fang_xiaoqu:{
                        required: true
                    },
                    fang_province:{
                        required:true,
                    },
                    fang_addr:{
                        required:true,
                    },
                    fang_direction:{
                        required:true,
                    },
                    fang_build_area:{
                        required:true
                    },
                    fang_using_area:{
                        required:true
                    },
                    fang_year:{
                        required:true
                    },
                    fang_rent:{
                        required:true
                    },
                    fang_floor:{
                        required:true
                    },
                    fang_shi:{
                        required:true
                    },
                    fang_ting:{
                        required:true
                    },
                    fang_wei:{
                        required:true
                    },
                    fang_pic:{
                        required:true
                    },
                    fang_rent_class:{
                        required:true
                    },
                    fang_config:{
                        required:true
                    },
                    fang_rent_range:{
                        required:true
                    },
                    fang_rent_type:{
                        required:true
                    },
                    fang_owner:{
                        required:true
                    },
                    fang_desn:{
                        required:true
                    },
                    fang_body:{
                        required:true
                    },
                    is_recommend:{
                        required:true
                    }
                },
                onkeyup:false,
                success:"valid",
                submitHandler:function(form){
                    form.submit();
                }
            });
        });

        function chaneCity(obj, nextSelector) {
            let pid = obj.value;
            // alert(pid);
            // 发送ajax请求
            $.get("{{ route('admin.fang.area') }}",{pid}).then(ret => {
                let html = `<option value="0">请选择</option>`;
                for(let item of ret){
                    html += `<option value="${item.id}">${item.area}</option>`;
                }
                $("#"+nextSelector).html(html);
            });
        }

    </script>
@endsection
